<template>
	<view class="body">
		<view class="" v-if="select == 0">


			<view class="top-header">
				<text class="app-name">订单广场</text>
			</view>
			<view class="address-box">
				<image class="address-icon" src="../../static/zhong.png"></image>
				<text class="address"><!-- {{ address }} --></text>
				<image class="text-btn" src="../../static/set.png"></image>
			</view>
			<view class="card-list">
				<!-- v-for="item in dataList" :key="item.id" -->
				<view class="card-item">
					<view class="card-top">
						<view class="card-text card-text-top">
							<view class="card-dot card-dot-top"></view>
							<text class="address"><!-- {{ item.start_place }} --></text>
						</view>

						<view class="card-text ">
							<view class="card-left">订单编号：</view>
							<text class="card-right">125235262643</text>
						</view>
						<view class="card-text ">
							<view class="card-left">上门时间：</view>
							<text class="card-right">2023-8-31 15:00</text>
						</view>

						<view class="card-text ">
							<view class="card-left">预估重量：</view>
							<text class="card-right">10-20kg</text>
						</view>
						<view class="card-text ">
							<view class="card-left">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</view>
							<text class="card-right">上次看你环境科技</text>
						</view>

					</view>
					<view class="card-bottom">
						<view class="order-infos">
							<view class="order-item">
								<view class="order-title">距离</view>
								<view class="order-result"><text
										class="speciltext"><!-- {{ item.distance }} --></text>公里
								</view>
							</view>
							<view class="order-item">
								<view class="order-title">回收品类</view>
								<view class="order-result"><text
										class="speciltext"><!-- {{ item.customDistance }} --></text>公里</view>
							</view>
							<view class="order-item">
								<view class="order-title">预估费用</view>
								<view class="order-result"><text class="price">￥<!-- {{ item.total_money }} --></text>
								</view>
							</view>
						</view>
						<view class="order-action">
							<image class="clock-icon" src="../../static/clock.png"></image>
							<text class="order-time"><!-- {{ item.createtime }} -->下单</text>
							<view class="action-button" @click="orderReceiving(item.id)">开始接单</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
			</view>
			<!-- 审核弹窗 -->
			<u-popup v-model="show" mode="bottom" border-radius="32">
				<view class="form-box">
					<view class="form-item">
						<view class="form-item-label">请认证后再开始接单</view>
					</view>
				</view>
				<view class="pop-btn">
					<view class="pop-btn-cancel"><u-button :custom-style="customStyle2" type="primary"
							hover-class="none" @click="refuse">暂不</u-button></view>
					<view class="pop-btn-confirm"><u-button :custom-style="customStyle3" type="primary"
							hover-class="none" @click="goUrl('/pages/fleet/authentication')">立即认证</u-button></view>
				</view>
			</u-popup>
		</view>
		<!-- 底部导航栏 -->
		<u-tabbar :value="value1" @change="name => value1 = name" :fixed="true" :placeholder="true"
			:safeAreaInsetBottom="true">
			<u-tabbar-item text="接单大厅" icon="home" @click="click1"></u-tabbar-item>

			<u-tabbar-item text="我的" icon="account" @click="click1"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1: 0,
				select: 0,

			}
		},
		methods: {
			click1(e) {
				console.log('click1', e);
				this.select = e
			}
		}
	}
</script>

<style lang="scss">
	.card-left {
		font-weight: bold;
	}

	.body {
		height: 100vh;
		width: 100vw;
		position: relative;

		.pop-btn {
			display: flex;
			padding: 60rpx 26rpx 40rpx 26rpx;
			justify-content: space-between;
			// padding-bottom: 40rpx;
			width: 100%;

			.pop-btn-cancel {
				width: 232rpx;
			}

			.pop-btn-confirm {
				width: 440rpx;
			}
		}

		.form-box {
			margin: 0 26rpx;
			border-bottom: 1rpx solid #EEEEEE;
			padding: 40rpx 0;

			.form-item {

				// margin-bottom: 20rpx;
				.tip-text {
					text-align: center;
					color: #333333;
					line-height: 40rpx;
					font-size: 28rpx;

					text {
						color: #00C265;
					}
				}

				.form-item-label {
					color: #333333;
					font-size: 30rpx;
					line-height: 42rpx;
					margin-bottom: 20rpx;
					text-align: center;
				}

				.form-item-input {
					background: #F8F8F8;

					input {
						height: 60rpx;
						display: block;
						padding: 14rpx 40rpx;
						color: #333333;
						font-size: 28rpx;

					}

					textarea {
						height: 160rpx;
						padding: 40rpx;
						color: #333333;
						font-size: 28rpx;
					}
				}
			}
		}

		.top-header {
			overflow: hidden;
			width: 100%;
			padding: 0 26rpx;
			padding-top: 30rpx;

			.app-name {
				float: left;
				color: #333333;
				font-size: 44rpx;
				font-weight: 500;
			}
		}

		.address-box {
			overflow: hidden;
			margin-top: 40rpx;
			height: 80rpx;
			background: #F2FFF9;
			padding: 0 26rpx;

			.address-icon {
				width: 40rpx;
				height: 40rpx;
				margin-top: 20rpx;
				float: left;
			}

			.address {
				float: left;
				color: #333333;
				font-size: 28rpx;
				margin-left: 10rpx;
				line-height: 80rpx;
			}

			.text-btn {
				width: 40rpx;
				height: 40rpx;
				margin-top: 20rpx;
				float: right;
			}
		}

		.card-list {
			padding: 0 30rpx;
			margin-top: 20rpx;

			.card-item {
				padding: 0 20rpx;
				border-radius: 16rpx;
				background: #FFFFFF;
				box-shadow: 0px 2px 8px 0px rgba(68, 68, 68, 0.15);
				margin-bottom: 24rpx;

				.card-top {
					border-bottom: 1rpx solid #E4E7ED;
					padding: 20rpx 0;

					.card-text {
						display: flex;
						overflow: hidden;
						font-size: 30rpx;
						color: #333333;
						line-height: 42rpx;
						margin-bottom: 10rpx;

						.card-dot {
							width: 16rpx;
							height: 16rpx;
							border-radius: 50%;
							float: left;
							margin-top: 13rpx;
							margin-right: 10rpx;
						}

						.card-dot-top {
							background: #18B566;
						}

						.card-dot-bottom {
							background: #FA3534;
						}
					}

					.card-text-top {
						margin-bottom: 20rpx;
					}
				}

				.card-bottom {
					padding-bottom: 20rpx;

					.order-infos {
						display: flex;
						padding: 20rpx 0;

						.order-item {
							flex: 1;
							text-align: center;

							.order-title {
								line-height: 1;
								font-size: 28rpx;
								color: #333333;
								margin-bottom: 20rpx;
							}

							.order-result {
								color: #111111;
								font-size: 26rpx;
								line-height: 42rpx;

								.speciltext {
									color: #19BE6B;
									font-size: 32rpx;
								}

								.price {
									color: #FF9900;
								}
							}
						}
					}

					.order-action {
						overflow: hidden;
						height: 74rpx;

						.clock-icon {
							height: 40rpx;
							float: left;
							width: 40rpx;
							margin-top: 17rpx;
							margin-right: 20rpx;
						}

						.order-time {
							color: #AAAAAA;
							font-size: 28rpx;
							float: left;
							line-height: 74rpx;
						}

						.action-button {
							float: right;
							width: 210rpx;
							height: 74rpx;
							background: linear-gradient(90deg, #00C8C6 0%, #00D496 100%);
							fontSize: 30rpx;
							text-align: center;
							line-height: 74rpx;
							border-radius: 12rpx;
							color: #FFFFFF;
						}
					}
				}
			}
		}
	}
</style>